Vue.component('demo-grid', {
    template: '#grid-template',
    props: {
        rows: Array,
        columns: Array,
        filterKey: String
    },
    data: function() {
        var colOrders = {}
        this.columns.forEach(function(col) {
            colOrders[col] = 1
        })
        return {
            setOrder: colOrders,
            sortKey: ''
        }

    },
    computed: {
        filterData: function() {
            var sortKey = this.sortKey
            var data = this.rows.slice()
            var filterKey = this.filterKey && this.filterKey.toLowerCase()
            var order = this.setOrder[sortKey]

            if (filterKey) {
                data = data.filter(function(row) {
                    return Object.keys(row).some(function(key) {
                        return String(row[key]).toLowerCase().indexOf(filterKey) > -1
                    })
                })
            }

            if (sortKey) {

                data.sort(function(a, b) {
                    a = a[sortKey]
                    b = b[sortKey]
                    return order > 0 ? a > b : a < b
                })
            }

            return data
        }
    },
    methods: {
        //对一个包含对象的数组的排序，需要提供一个对象键并以此值来进行排序
        order: function(key) {
            this.sortKey = key
            this.setOrder[key] = this.setOrder[key] * -1
        },
    }

})
var vm = new Vue({
    el: '#grid',
    data: {
        columnData: ['name', 'age'],
        searchQuery: '',
        rowData: [{
            name: 'zhangsan',
            age: '10'
        }, {
            name: 'lisi',
            age: '11'
        }, {
            name: 'wanger',
            age: '17'
        }, {
            name: 'laoli',
            age: '3'
        }]
    },

})